<template>
	<view class="container pad-32">
		<view class="centerXY pad-32 bg-white columnY radius24">
			<view class="color-grey font-28 mar-bottom-30">可用余额</view>
			<view class="ti color-theme font-48"> <text class="font-24 mar-right-5">￥</text>{{amount}}</view>
		</view>
		<u--form class="pad-top-30" labelPosition="left" :model="info" ref="form1" labelWidth="180rpx"
			:labelStyle="{fontSize: '28rpx'}">
			<view class="bg-white pad-left-right-24 pad-top-bottom-16 radius24">
				<u-form-item label="提现金额" prop="tel" :borderBottom="false">
					<u--input type="text" clearable placeholderClass="input-style" placeholder="请输入提现金额"
						v-model="info.amount" border="none"></u--input>
				</u-form-item>
			</view>
		</u--form>
	<!-- 	<view class="font-28 mar-top-20">提现手续费总金额的 <text
				class="color-theme pad-left-right-10">{{ Number(llfeeRate) * 100}}</text> %</view> -->

		<u-button :customStyle="{borderRadius: '12rpx'}" class="mar-top-96 font-32 button bg-theme"
			@click="submit">提现</u-button>

		<my-popup :content="`即将提现到：${card}`" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeLogin"></my-popup>

		<u-popup :show="isCode" round="15" mode="center" :closeOnClickOverlay="false" closeable  @close="hanldeClose">
			<view class="pad-30 mar-top-50">
				<view class="font-30 color-grey mar-bottom-10">短信验证码</view>
				<u-input placeholder="请输入验证码" border="surround" v-model="verify_code"></u-input>
				<view class="betweenX mar-top-30 font-30">
					<view @click="hanldeConfirm"
						class="flex-w bg-theme color-white radius12 pad-top-bottom-15 button-style text-center">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		userApply,
		llPwdToken,
		backCardGetAll,
		llUserValidateSms
	} from '@/config/api.js'
	import {
		llWallet
	} from '@/config/url.js'
	export default {
		data() {
			return {
				info: {
					amount: ''
				},
				backCard: '',
				amount: 0,
				isPopup: false,
				card: '',
				// 手续费
				llfeeRate: wx.getStorageSync('llfeeRate'),
				// 验证码
				verify_code: '',
				isCode: false,
			}
		},
		onLoad(options) {
			this.amount = options.amount;
			this.on_id = options.on_id;
		},
		methods: {
			// 关闭验证码弹窗
			hanldeClose() {
				this.isCode = false
			},
			hanldeConfirm() {
				if (this.verify_code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon:'none'
					})
					return
				}
				
				llUserValidateSms({
					...this.codeData,
					verify_code: this.verify_code
				}).then(res => {
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						let pages = getCurrentPages(); //获取页面实例
						let nowPage = pages[pages.length - 1]; //当前页面实例
						let prevPage = pages[pages.length - 2]; //上一级页面实例

						prevPage.$vm.isRefresh()
						uni.navigateBack({ //返回
							delta: 1
						})
					}, 1500)
				})
			},
			// 提示弹窗
			hanldeLogin() {
				this.isPopup = false;
				llPwdToken({
					password_scene: 'cashout_password',
					flag_chnl: 'H5',
					amount: this.info.amount
				}).then(res => {
					// 以下参数通过服务端获取
					lianlianpay.invokePasswordControl({
						passwordScene: 'cashout_password',
						oidPartner: res.data.oid_partner, // 商户号
						userId: res.data.user_id, // 用户号
						passwordElementToken: res.data.password_element_token, // 向服务端请求生成的 token
						env: llWallet, // 默认 production-生产
						styles: { // 样式集合
							themeColor: '#0E59F0', // 主题颜色（按钮等）
						}
					}, (res) => {

						let data = {
							pay_plat_id: 11,
							amount: this.info.amount,
							ll_data: {
								linked_acctno: this.card,
								payerInfo: {
									password: res.data.password,
									random_key: res.data.randomKey,
								}
							}
						}

						userApply(data).then(apply => {
							if (apply.data) {
								this.isCode = true;
								this.codeData = apply.data;
							} else {
								uni.showToast({
									title: apply.msg
								})
								setTimeout(() => {
									let pages = getCurrentPages(); //获取页面实例
									let nowPage = pages[pages.length - 1]; //当前页面实例
									let prevPage = pages[pages.length - 2]; //上一级页面实例

									prevPage.$vm.isRefresh()
									uni.navigateBack({ //返回
										delta: 1
									})
								}, 1500)
							}

						})
					})
				})
			},
			submit() {
				if (this.info.amount == '') {
					uni.showToast({
						title: '请输入你要提现的金额',
						icon: 'none'
					})
					return
				}

				backCardGetAll({plat_id: 11}).then(res => {
					this.card = res.data.linked_acctlist[0].linked_acctno
					this.isPopup = true;
				})
			}
		}
	}
</script>

<style>
	.button {
		box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
		height: 96rpx;
		color: white;
	}

	.input-style {
		color: rgb(192, 196, 204) !important;
	}


	.container {
		box-sizing: border-box;
		background: url('../../static/image/my-bg.png') no-repeat;
		background-size: 100% 100%;
		height: 100vh;
	}
</style>